import React, { useContext } from 'react';

import styles from './style.module.scss';
import { HomeContext } from "./../context";

export default function GroupInfo(props) {
    const { createPrivateRoom } = useContext(HomeContext)
    let { members = [], userId } = props;
    let total=members.length
    let count=members.filter(item=>item.online).length
    console.log(members)
    return (
        <div className={styles.info}>
            <div className={styles.inform}>
                <h3 className={styles.title}>群通知</h3>
                <div className={styles.content}>
                    <p><span>[公告]</span>请遵守友好发言规则,勿卡bug,谢谢大家</p>
                </div>
            </div>
            <div className={styles.member}>
                {/* <h3 className={styles.title}>群成员 2/3</h3> */}
                <h3 className={styles.title}>在线成员 {count}/{total}</h3>
                <ul>
                    {
                        members.map(({ nickname,remark,userId, online,username }) => {
                            return <li
                                key={userId}
                                // onClick={() => userId != userId && createPrivateRoom({ to: userId, name: username })}
                                style={online? {} : { opacity: 0.5 }}
                            >{remark||nickname}{online ? '[在线]' : '[离线]'}</li>
                        })
                    }
                </ul>
            </div>
        </div>
    )
}